<template>
  <div ref="el" class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div class="dataScreen-header">
        <div class="header-lf">
          <!-- <span class="header-screening">智慧校园展厅</span> -->
          <div class="building-name">{{ buildingName }}{{ floorName }} <img src="../images/down-icon.png" alt="" /></div>
          <el-tree-select class="build-select" node-key="id" :props="{ label: 'name', children: 'children' }"
            v-model="treeValue" :data="buildingTreeList" :render-after-expand="false" style="width: 240px"
            @node-click=nodeClick />
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>智慧宿舍</span>
          </div>
        </div>
        <div class="header-ri">
          <div class="flex-center">
            <span class="header-time">{{ time }}</span>
            <div class="full-icon" @click="toggle" style="padding-top: 5px;">
              <img src="../images/full-icon.png" alt="" />
            </div>
          </div>
          <div class="flex-center">
            <span class="header-time" style="font-size: 36px;">{{ time1 }}</span>
            <img src="../images/setting-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="statistics-box">
          <div class="box-item">
            <div>
              <img class="item-img" src="../images/top-bg-item1.png" alt="" />
            </div>
            <div class="item-right">
              <div class="num">{{ peopleStat.allCount }}</div>
              <div>总住宿人数</div>
            </div>
          </div>
          <div class="box-item">
            <div>
              <img class="item-img" src="../images/top-bg-item2.png" alt="" />
            </div>
            <div class="item-right">
              <div class="num">{{ peopleStat.inCount }}</div>
              <div>当前归寝人数</div>
            </div>
          </div>
          <div class="box-item">
            <div>
              <img class="item-img" src="../images/top-bg-item3.png" alt="" />
            </div>
            <div class="item-right">
              <div class="num">{{ peopleStat.outCount }}</div>
              <div>当前离寝人数</div>
            </div>
          </div>
          <div class="box-item">
            <div>
              <img class="item-img" src="../images/top-bg-item4.png" alt="" />
            </div>
            <div class="item-right">
              <div class="num">{{ peopleStat.allCount }}</div>
              <div>外来人员人数</div>
            </div>
          </div>
          <div class="box-item">
            <div>
              <img class="item-img" src="../images/top-bg-item5.png" alt="" />
            </div>
            <div class="item-right">
              <div class="num">{{ peopleStat.leaveCount }}</div>
              <div>今日请假人数</div>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="main-left">
            <div class="top-panel panel">
              <div class="title">出入人员动态记录</div>
              <div class="main">
                <div class="item" v-for="(item, index) in accessList" :key="index">
                  <div>
                    <img class="item-img" :src="item.capturePhoto || 'https://via.placeholder.com/100'"
                      @error="defaultImg" alt="" />
                  </div>
                  <div class="item-name">{{ item.studentName || '陌生人' }}</div>
                  <div class="item-time">{{ item.clockingTime }}</div>
                </div>
              </div>
            </div>
            <div class="bottom-panel panel">
              <div class="title">外来人员警告记录</div>
              <template v-if="outsiderPeopleList.length">
                <div class="main">
                  <div class="item" v-for="(item, index) in outsiderPeopleList" :key="index">
                    <div class="item-left">{{ ['', '陌生人', '男进女宿舍楼'][item.outsiderAlertType] }}</div>
                    <div class="item-right">
                      <div class="item-img">
                        <img class="avatar" :src="item.capturePhoto || 'https://via.placeholder.com/100'"
                          @error="defaultImg" alt="" />
                      </div>
                      <div class="item-img">
                        <div class="name">{{ item.studentName || '陌生人' }}</div>
                        <div class="phone">{{ item.alertTime }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <div v-else class="no-data-box">
                <img src="../images/no-data.png" alt="" />
                毫无数据
              </div>
            </div>
          </div>
          <div class="main-center">
            <div class="top-panel panel">
              <div class="video-box">
                <div class="title-box">
                  <div class="title1">实时人员出入动态</div>
                </div>
                <div class="top-panel-main">
                  <div class="item item1" v-for="(item, index) in accessList.slice(0, 3)" :key="index">
                    <div class="out">
                      <div class="avatar">
                        <img class="img" :src="item.capturePhoto || 'https://via.placeholder.com/100'"
                          @error="defaultImg" />
                      </div>
                      <div class="name">{{ item.studentName || '陌生人' }}</div>
                      <div class="in-time">{{ item.clockingTime || '暂无数据' }}</div>
                    </div>
                  </div>
                  <!-- <div class="item item2">
                    <div class="out">
                      <img class="avatar" :src="accessList[1].capturePhoto || 'https://via.placeholder.com/100'" />
                      <div class="name">{{accessList[1].studentName || '陌生人'}}</div>
                      <div class="in-time">{{accessList[1].clockingTime || '暂无数据'}}</div>
                    </div>
                  </div>
                  <div class="item item3">
                    <div class="out">
                      <img class="avatar" :src="accessList[2].capturePhoto || 'https://via.placeholder.com/100'" />
                      <div class="name">{{accessList[2].studentName || '陌生人'}}</div>
                      <div class="in-time">{{accessList[2].clockingTime || '暂无数据'}}</div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="bottom-panel panel">
              <div class="title-box">
                <div class="title">实时人员出入动态</div>
              </div>
              <!-- <RealTimeAccessChart1 /> -->
            </div>
          </div>
          <div class="main-right">
            <div class="top-panel panel">
              <div class="title">全校各楼栋学生归寝情况</div>
              <div class="main">
                <div class="item flex-center" v-for="(item, index) in rightTopStat" :key="index">
                  {{ item.buildingName }}（{{ item.inCount }}/{{ item.allCount }}）
                </div>
                <!-- <div class="item flex-center">女生宿舍一号楼（0/0）</div>
                <div class="item flex-center">武大人（0/10）</div>
                <div class="item flex-center">1栋（0/111）</div> -->
              </div>
            </div>
            <div class="bottom-panel panel">
              <div class="title">近七日就寝情况</div>
              <Line />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataScreen">
import { shifPeopleStat, getBuildingTreeList, buildingPeopleStat, accessRecordList, outsiderList, shitInoutStat } from '@/api/bigScreen';
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useFullscreen } from '@vueuse/core';
import Line from "../components/Line.vue";
const dataScreenRef = ref<HTMLElement | null>(null);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const treeValue = ref('')
const el = ref<HTMLElement>();
const { toggle } = useFullscreen(el);
onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
  init()
});
const buildingId = ref<string>('')
const floorId = ref<string>('')
const buildingName = ref<string>('')
const floorName = ref<string>('')
const peopleStat = ref<any>({})
const rightTopStat = ref<any>([])
const buildingTreeList = ref<any>([])
const _buildingTreeList = ref<any>([])
const accessList = ref<any>([])
const outsiderPeopleList = ref<any>([])
const init = async () => {
  const res = await shifPeopleStat({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  peopleStat.value = res.data
  const res1 = await getBuildingTreeList()
  _buildingTreeList.value = res1.data
  const data = proxy?.handleTree<BuildingTreeVO>(res1.data.filter(item => item.type !== 'R' && item.type !== 'T'), 'id', 'parentId');
  if (data) {
    buildingTreeList.value = data;
    if (!treeValue.value && buildingTreeList.value.length) {
      treeValue.value = buildingTreeList.value[0].id
      buildingId.value = buildingTreeList.value[0].sourceId
      buildingName.value = buildingTreeList.value.find((ele: any) => ele.sourceId === buildingId.value)?.name
    }
  }
  const res2 = await buildingPeopleStat()
  rightTopStat.value = res2.data
  const res3 = await accessRecordList()
  accessList.value = res3.rows.map((item: any) => {
    item.clockingTime = useDateFormat(item.clockingTime, 'HH:mm:ss')
    return item
  })
  const res4 = await outsiderList({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  outsiderPeopleList.value = res4.rows.map((item: any) => {
    item.alertTime = useDateFormat(item.alertTime, 'HH:mm:ss')
    return item
  })
  const res5 = await shitInoutStat()
  // outsiderPeopleList.value = res4.rows

  // peopleStat.value = res1.data
};
const nodeClick = (item: any) => {
  if (item.type === 'B') {
    buildingId.value = item.sourceId
    buildingName.value = _buildingTreeList.value.find((ele: any) => ele.sourceId === item.sourceId)?.name
    floorName.value = ''
  } else {
    floorId.value = item.sourceId
    floorName.value = _buildingTreeList.value.find((ele: any) => ele.sourceId === floorId.value)?.name
    buildingName.value = _buildingTreeList.value.find((ele: any) => ele.id === item.parentId)?.name
  }
  init()
}
const defaultImg = (e: any) => {
  e.target.src = 'https://via.placeholder.com/100'
};
// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
const formatDate = () => {
  // 获取当前时间
  const now = new Date();
  // 获取年、月、日、时、分、秒
  const year = now.getFullYear();
  const month = ("0" + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1
  const day = ("0" + now.getDate()).slice(-2);
  const hours = ("0" + now.getHours()).slice(-2);
  const minutes = ("0" + now.getMinutes()).slice(-2);
  const seconds = ("0" + now.getSeconds()).slice(-2);
  const formattedTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  const formattedTime1 = hours + ":" + minutes + ":" + seconds;
  // 格式化输出
  return { formattedTime, formattedTime1 };
};
// 获取当前时间
let timer;
let time = ref(formatDate().formattedTime);
let time1 = ref(formatDate().formattedTime1);
timer = setInterval(() => {
  time.value = formatDate().formattedTime;
  time1.value = formatDate().formattedTime1;
}, 1000);

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  clearInterval(timer);
});
</script>
<style lang="scss" scoped>
@import "./comprehensive.scss";
</style>
